<template>
	<view style="width: 100%;display: flex;flex-direction: column;gap: 5px;">
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
			<view style="display: flex;align-items: center;gap: 10px;padding-right: 10px;">
				<view style="position: relative;">
					<tn-avatar :url="sConf.pics + data.face" style="padding: 5px;" :size="asize" shape="circle" shadow
						shadow-color="tn-shadow-lg" bg-color="#ffffff33" />
					<tn-icon v-if="data.gender == 0" name="girl" size="48" color="#ff007f"
						style="position: absolute;bottom: 0;right: 0;"></tn-icon>
					<tn-icon v-if="data.gender == 1" name="boy" size="48" color="#007aff"
						style="position: absolute;bottom: 0;right: 0;"></tn-icon>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: space-between;">
					<view style="display: flex;gap: 10px;align-items: center;">
						<view class="textView" :style="{ fontSize: fsize }" style="font-weight: bold;color: #fff;">
							{{ data.nicename }}
						</view>

						<view v-if="Boolean(note)" class="" style="color: #aaa;">
							({{note.name}})
						</view>

						<tn-bubble-box :options="[{ text: data.curLevel.name }]" position="right">
							<view>
								<tn-icon v-if="checkUrl(data.curLevel.icon)" :name="sConf.pics + data.curLevel.icon"
									:color="data.curLevel.color" size="56"></tn-icon>
								<tn-icon v-else :name="data.curLevel.icon" :color="data.curLevel.color"
									size="56"></tn-icon>

							</view>
						</tn-bubble-box>
					</view>
					<view style="color: #aaa;font-size: x-small;">{{data.created}}</view>
				</view>
			</view>

			<view style="display: flex;gap: 5px;">
				<!--显示个人码-->
				<view v-if="qrcode" style="padding: 2px;border-radius: 5px;background-color: #333;">
					<tn-icon name="qr-beibei" size="64" color="#fff" @tap="showQrCode"></tn-icon>
				</view>
				<!-- 显示权益 -->
				<view v-if="isLevel" style="padding: 2px;border-radius: 5px;background-color: #333;">
					<view style="display: flex;flex-direction: column;align-items: center;padding: 5px;">
						<tn-icon v-if="checkUrl(data.curLevel.icon)" :name="sConf.pics + data.curLevel.icon"
							:color="data.curLevel.color" size="64"></tn-icon>
						<tn-icon v-else :name="data.curLevel.icon" :color="data.curLevel.color" size="64"></tn-icon>
						<view :style="{ color: data.curLevel.color }" style="font-size: smaller;">
							{{ data.curLevel.name }}
						</view>
					</view>
				</view>
				<!--显示操作-->
				<view v-if="isTarget" style="padding: 2px;border-radius: 5px;background-color: #333;">
					<tn-bubble-box :options="BubbleBoxOption" position="left" bg-color="#333" text-color="#aaa"
						option-item-padding="10px" @click="targetChange">
						<view class=""><tn-icon name="more-circle" size="64" color="#fff"></tn-icon></view>
					</tn-bubble-box>
				</view>
				<!-- 显示导航 -->
				<view v-if="isNav" style="padding: 2px;border-radius: 5px;background-color: #333;">
					<tn-icon name="plane" size="64" color="#fff" @tap="navChange"></tn-icon>
				</view>
			</view>
		</view>
		<view v-if="isDesc && data.desc"
			style="color: #aaa;font-size: small; background-color: #00000044;padding: 5px 10px;border-radius: 5px;">
			{{ data.desc }}
		</view>
		<view style="width: 100%;display: flex;justify-content: center;">
			<tn-icon name="down" size="32" color="#aaa" @tap="() => { this.isMore = !this.isMore }"></tn-icon>
		</view>
		<view v-if="isMore" style="width: 100%;display: flex;padding-top: 10px;justify-content: center;">
			<view
				style="background-color: #00000088;padding: 10px;border-radius: 5px;display: flex;justify-content: space-between;gap: 10px;">
				<view v-if="data.parent"
					style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<tn-avatar :url="sConf.pics + data.parent.face" size="sm"></tn-avatar>
					<text class="single-line"
						style="font-size: smaller;color: #aaa;text-align: center;">{{data.parent.nicename}}</text>
				</view>
				<view v-if="data.auth"
					style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<tn-icon name="identity" color="#4cd964" size="48"></tn-icon>
					<text class="single-line" style="font-size: smaller;color: #aaa;">实名认证</text>
				</view>
				<view v-else @click="idcardChange"
					style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<tn-icon name="identity" color="#888" size="48"></tn-icon>
					<text class="single-line" style="font-size: smaller;color: #aaa;">未认证</text>
				</view>
				<view v-if="data.phone"
					style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<tn-bubble-box :options="[{ text: data.phone, icon:'phone' }]" position="right"
						@click="rePhoneChange">
						<tn-icon name="phone" size="48" color="#ff9a44"></tn-icon>
					</tn-bubble-box>
					<text class="single-line" style="font-size: smaller;color: #aaa;">手机认证</text>
				</view>
				<view v-else @click="phoneChange"
					style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<tn-icon name="phone" size="48" color="#888"></tn-icon>
					<text class="single-line" style="font-size: smaller;color: #aaa;">未认证</text>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<text
						style="font-size: large;font-weight: bold;color: #fff;">{{ zipPoint(data.exper.amount) }}</text>
					<text class="single-line" style="font-size: smaller;color: #aaa;">个人业绩</text>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<text
						style="font-size: large;font-weight: bold;color: #fff;">{{ zipPoint(data.expers.amount) }}</text>
					<text class="single-line" style="font-size: smaller;color: #aaa;">团队业绩</text>
				</view>
				<view style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
					<text style="font-size: large;font-weight: bold;color: #fff;">{{ data.scope }}</text>
					<text class="single-line" style="font-size: smaller;color: #aaa;">团队规模</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	export default {
		name: "sub-staff-card",
		data() {
			return {
				sConf: getApp().globalData,
				isMore: false,
				BubbleBoxOption: [{
						text: '提升权益等级',
						icon: 'vip-diamond'
					},
					{
						text: '发放抵扣红包',
						icon: 'lucky-money'
					},
					{
						icon: 'identity',
						text: '修改别称别名'
					}
				]
			};
		},
		mounted() {
			this.isMore = this.isMored
		},
		props: {
			data: {
				type: Object
			},
			qrcode: { // 显示创建二维码
				type: Boolean,
				default: false
			},
			isTarget: { // 显示动作按钮组
				type: Boolean,
				default: false
			},
			isLevel: { // 显示权益
				type: Boolean,
				default: false
			},
			isNav: { // 导航事件
				type: Boolean,
				default: false
			},
			isMored: { // 更多按钮状态
				type: Boolean,
				default: false
			},
			isDesc: { // 个性签名
				type: Boolean,
				default: true
			},
			note: { // 别称对象
				type: Object,
				default: null
			},
			fsize: {
				type: String,
				default: 'medium',
			},
			asize: {
				type: String,
				default: 'lg'
			}
		},
		methods: {
			zipStr(e) {
				return utils.zipStr(e);
			},
			zipPoint(e) {
				return utils.zipPoint(e / 100)
			},
			checkUrl(e) {
				if (e.slice(0, 1) === '/') {
					return true
				} else {
					return false
				}
			},
			showQrCode() {
				console.log('二维码事件');
				this.$emit('showQrCode')
			},
			navChange() {
				console.log('点击事件');
				if (this.isNav) {
					this.$emit('navChange', this.data.id);
				}
			},
			targetChange(e) {
				console.log('targetChange', e);
				let data = {
					sid: this.data.id,
					name: this.data.nicename,
					isVip: this.data.isVip,
					level: this.data.curLevel.level
				}
				if (e === 0) {
					this.$emit('levelEvent', data)
				} else if (e === 1) {
					this.$emit('masterEvent', data)
				} else if (e === 2) {
					let that = this
					uni.showModal({
						title: "修改别称",
						editable: true,
						content: that.note?.name || '',
						placeholderText: "请输入改成员的别称标识",
						success(r) {
							if (r.confirm && r.content) {
								that.$emit('noteEvent', {
									id: that.note?.id || null,
									child: that.data.id,
									name: r.content
								})
							}
						}
					})
				}
			},
			idcardChange() {
				if (this.data.id === this.sConf.auth.id) {
					uni.navigateTo({
						url: '/pagec/idcard/idcard'
					})
				}
			},
			phoneChange() {
				if (this.data.id === this.sConf.auth.id) {
					uni.showModal({
						title: '绑定手机',
						content: '是否要绑定安全手机',
						success(r) {
							if (r.confirm) {
								uni.navigateTo({
									url: '/pagec/bind-phone/bind-phone?state=1'
								})
							}
						}
					})
				}
			},
			rePhoneChange() {
				if (this.data.id === this.sConf.auth.id) {
					let that = this
					uni.showModal({
						title: '绑定手机',
						content: '是否要变更安全手机',
						success(r) {
							if (r.confirm) {
								uni.navigateTo({
									url: '/pagec/bind-phone/bind-phone?state=0&phone=' + that.data.phone
								})
							}
						}
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.textArrow {
		position: absolute;
		bottom: -10px;
		left: calc(100vw / 2 - 16px);
	}

	.single-line {
		max-width: 70px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: clip;
	}
</style>